<template>
	<view class="content">
		<ZPaging
		    ref="paging"
		    v-model="list"
			:auto="false"
		    :auto-show-system-loading="true"
			system-loading-text="Loading"
			loading-more-no-more-text="沒有更多了"
			loading-more-default-text="點擊加載更多"
			loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載"
			empty-view-text="沒有數據哦~"
			refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新"
			refresher-refreshing-text="正在刷新"  
			empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗"
		    @query="queryList"
		>
		     <template #top>
		        <NavBar :title="title" :autoBack="false" id="nav">
		        	<template #left>
		        		<view class="navbar-left center" @click="goBack">
		        			<u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
		        		</view>
		        	</template>
		        </NavBar>
				<view class="flex searchtimebox">
					<view class="flex time" @click="openShowDate">
						<view class="bold tag">{{playSet.year}}</view>
						年
						<view class="bold tag">{{playSet.month}}</view>
						月
						<view class="bold tag">{{playSet.day}}</view>
						日
					</view>
					<u-icon name="arrow-down" size="24" class="ml-8"></u-icon>
				</view>
		    </template>
		    <template #default>
				<view class="widths">
					<view class="flex list">
						<view class="item" v-for="(v,k) in list" :key="k" @click="toPlay(v)">
							<view class="center pic">
								<u-image class="img" width="90rpx" height="90rpx" mode="aspectFit" src="../../static/img05.png"></u-image>
							</view>
							<view class="f30 date">{{formatTimestamp3(v.startTime)}}</view>
							<!-- <view class="name">
								{{formatTimestamp2(v.startTime)}}~{{formatTimestamp2(v.endTime)}}
							</view> -->
							<view class="flex time">
								<u-image width="44rpx" height="44rpx" mode="aspectFit" src="../../static/img06.png"></u-image>
								<view class="c999 timenum">{{timeFormatSecond(v.timeLen)}}</view>
							</view>
						</view>
					</view>
				</view>
		        
		
		    </template>
		 </ZPaging>
		<Tabar></Tabar>
		<u-picker mode="time" v-model="showTime"
		:default-time="timePickerDefault" 
		:params="params"
		confirm-text="確認"
		cancel-text="取消"
		@confirm="confirmDate"
		></u-picker>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import Tabar from "@/component/HomeTab"
	import NavBar from "@/component/NavBar"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	import { baseUrl,videoImgBaseUrl } from "@/api/url.js"
	import { getPlaybackList } from "@/api/apis.js"
import { parseInt } from "lodash";
	export default {
		components:{
			Tabar,
			NavBar,
			ZPaging
		},
		data() {
			return {
				curapp:"",
				curstream:"",
				title:"回放列表",
				list:[],
				playSet:{
					speed:1,
					year:0,
					month:0,
					day:0,
					startInfo:{
						hour:0,
						minute:0,
						second:0,
						timestamp:0,
					},
					endInfo:{
						hour:0,
						minute:0,
						second:0,
						timestamp:0,
					}
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				curtimestamp:0,
				timePickerDefault:"",
				startTimestamp:0,
				queryStarttime:"",
				queryEndtime:"",
				showTime:false,
				caseid:0,
				did:0,
			}
		},
		created() {
		 
		},
		onShow(){
			this.setTabList(uni.getStorageSync("bindevice"))
			const { app,stream,startTime,endTime,caseid,did } = this.$Route.query
			
			if(caseid){
				this.caseid = caseid
				this.did = did
				uni.setStorageSync("caseid",caseid)
				uni.setStorageSync("did",did)
			}else{
				if(uni.getStorageSync('caseid')){
					this.caseid = uni.getStorageSync('caseid')
					this.did = uni.getStorageSync("did")
				}
			}
			if(app && stream){
				this.curapp = app
				this.curstream = stream
				uni.setStorageSync("curapp",app)
				uni.setStorageSync("curstream",stream)
				if(startTime){
					uni.setStorageSync("startTimes",startTime)
					uni.setStorageSync("endTimes",endTime)
					this.queryStarttime = this.formatTimestamp(startTime)
					this.queryEndtime = this.formatTimestamp(endTime)
				}
				console.log('this.queryStarttime',this.queryStarttime,this.queryEndtime)
				this.init()
			}else{
				if(uni.getStorageSync("curapp") && uni.getStorageSync("curstream")){
					this.curapp = uni.getStorageSync("curapp")
					this.curstream = uni.getStorageSync("curstream")
					if(uni.getStorageSync("startTimes") || uni.getStorageSync("endTimes")){
						if(!uni.getStorageSync("startTimes")){
							let t = parseInt(new Date().getTime())/1000
							uni.setStorageSync('startTimes',t)
							this.queryStarttime = this.formatTimestamp(t)
						}
						
						this.queryEndtime = this.formatTimestamp(uni.getStorageSync("endTimes")) 
					}
					this.init()
				}else{
					// this.goBack()
				}
			}
			this.$nextTick(()=>{
				
				if(uni.getStorageSync("islogin")){
					// this.ident=parseInt(uni.getStorageSync("ident")) 
					// if(uni.getStorageSync('name')){
					// 	this.changeUserName(uni.getStorageSync('name'))
					// }
				}
			})
		},
		onLoad() {

		},
		mounted() {
			this.$nextTick(() => {
			    // this.init();
			});
		},
		computed: {
			...mapState(["userinfo"]),
		},
		methods: {
			...mapMutations(['chageUserPageType','chageUserPageId','changeUserIdent','changeUserName','setTabList']),
			init(){
				if(!this.queryStarttime){
					//獲取當前時間
					this.getCurtime()
					//獲取視頻列表
					this.$nextTick(()=>{
						this.reload()
					})
				}else{
					this.setShowTime(uni.getStorageSync("startTimes"))
					this.$nextTick(()=>{
						this.reload()
					})
				}
				
			},
			
			getCurtime(){
				let date = new Date();
				let year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					days = date.getDay();
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				this.curtimestamp = parseInt(date.getTime()/1000)
				this.queryEndtime = this.formatTimestamp(this.curtimestamp)
				this.playSet.year = year
				this.playSet.month = month
				this.playSet.day = day
				this.timePickerDefault = year+"-"+month+"-"+day
				date.setHours(0,0,0,0)
				this.startTimestamp = parseInt(date.getTime()/1000)
				this.queryStarttime = this.formatTimestamp(this.startTimestamp)
			},
			setShowTime(e){
				console.log('e',e)
				let date = new Date(e * 1000);
				let year = date.getFullYear(); 
				let month = date.getMonth() + 1; 
				let day = date.getDate(); 
				let hours = date.getHours(); 
				let minutes = date.getMinutes(); 
				let seconds = date.getSeconds(); 
							
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				this.timePickerDefault = year+"-"+month+"-"+day
				this.playSet.year = year
				this.playSet.month = month
				this.playSet.day = day
			},
			//選擇日期
			openShowDate(){
				this.params.hour =false
				this.params.minute = false
				this.params.second = false
				this.showTime=true
			},
			confirmDate(e){
				// this.curtimestamp = e.timestamp
				this.playSet.year = e.year
				this.playSet.month =e.month
				this.playSet.day = e.day
				this.timePickerDefault = e.year+"-"+e.month+"-"+e.day
				this.queryStarttime = this.formatTimestamp(e.timestamp)
				let cur = new Date()
				this.queryEndtime = this.formatTimestamp(parseInt(cur.getTime()/1000))
				this.reload()
			},
			openShowSpeed(){
				this.showSpeedList = true
			},
			confirmSpeed(e){
				this.playInfo.speed = this.speedList[e]
			},
			reload(){
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize){
				const data = {
					page:pageNo,
					pageSize,
					vtoken:uni.getStorageSync("vtoken"),
					uid:uni.getStorageSync("uid"),
					app:this.curapp,
					stream:this.curstream,
					startTime:this.queryStarttime,
					endTime:this.queryEndtime,
				}
				// if(pageNo==1){
				// 	this.templist = []
				// }
				getPlaybackList(data).then((res)=>{
					// this.curUserident = res.user_auth
					// this.templist = this.templist.concat(res.list)
					this.$refs.paging.complete(res.list)
					if(res.vtoken){
						uni.setStorageSync('vtoken',res.vtoken)
					}
				}).catch((err)=>{
					this.$Toast(err.msg)
				})
				
			},
			timeFormatSecond(t){
				let timeNum = parseInt(t/1000);
				var hours = Math.floor(timeNum / 3600);
				var minutes = Math.floor((timeNum % 3600) / 60);
				var seconds = timeNum % 60;
				
				var formattedTime = ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
				return formattedTime;
			},
			formatTimestamp(timestamp) {
			  let date = new Date(timestamp * 1000); 
			  let year = date.getFullYear(); 
			  let month = date.getMonth() + 1; 
			  let day = date.getDate(); 
			  let hours = date.getHours(); 
			  let minutes = date.getMinutes(); 
			  let seconds = date.getSeconds(); 
			
			  month = month < 10 ? '0' + month : month;
			  day = day < 10 ? '0' + day : day;
			  hours = hours < 10 ? '0' + hours : hours;
			  minutes = minutes < 10 ? '0' + minutes : minutes;
			  seconds = seconds < 10 ? '0' + seconds : seconds;
			
			  let formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			  return formattedDate;
			},
			formatTimestamp2(timestamp) {
			  let date = new Date(timestamp); 
			  let year = date.getFullYear(); 
			  let month = date.getMonth() + 1; 
			  let day = date.getDate(); 
			  let hours = date.getHours(); 
			  let minutes = date.getMinutes(); 
			  let seconds = date.getSeconds(); 
			
			  month = month < 10 ? '0' + month : month;
			  day = day < 10 ? '0' + day : day;
			  hours = hours < 10 ? '0' + hours : hours;
			  minutes = minutes < 10 ? '0' + minutes : minutes;
			  seconds = seconds < 10 ? '0' + seconds : seconds;
			
			  let formattedDate =hours + ':' + minutes + ':' + seconds;
			  return formattedDate;
			},
			formatTimestamp3(timestamp) {
			  let date = new Date(timestamp); 
			  let year = date.getFullYear(); 
			  let month = date.getMonth() + 1; 
			  let day = date.getDate(); 
			  let hours = date.getHours(); 
			  let minutes = date.getMinutes(); 
			  let seconds = date.getSeconds(); 
			
			  month = month < 10 ? '0' + month : month;
			  day = day < 10 ? '0' + day : day;
			  hours = hours < 10 ? '0' + hours : hours;
			  minutes = minutes < 10 ? '0' + minutes : minutes;
			  seconds = seconds < 10 ? '0' + seconds : seconds;
			
			  let formattedDate = year + '-' + month + '-' + day +' '+ hours + ':' + minutes + ':' + seconds;
			  return formattedDate;
			},
			toPlay(item){
				if(!this.caseid){
					this.$Toast("數據錯誤")
					setTimeout(()=>{
						uni.navigateBack(-1);
					},1200)
					return;
				}
				uni.removeStorageSync("startTimes")
				// console.log('toplay',uni.getStorageSync())
				let data = {
					startTime:parseInt(item.startTime/1000),
					endTime:parseInt(item.endTime/1000),
					filePath:item.filePath,
					timeLen:this.timeFormatSecond(item.timeLen),
					app:item.app,
					stream:item.stream,
					caseid:this.caseid,
					did:this.did
				}
				this.toPage('Playback',data)
				
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			},
			goBack(){
				uni.navigateBack(-1)
			}
			
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
		.searchtimebox{
			background-color: #f2f2f2;
			padding-top: 88rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			.time{
				padding: 20rpx 0;
				.tag{
					padding: 0 4rpx;
				}
			}
			.btnbox{
				
			}
		}
		.list{
			flex-wrap: wrap;
			margin-top: 20rpx;
			.item{
				width: 49%;
				margin-right: 2%;
				margin-bottom: 20rpx;
				&:nth-child(2n){
					margin-right: 0%;
				}
				.pic{
					background-color: #888;
					border-radius: 8rpx;
					position: relative;
					padding-bottom: 60%;
					.img{
						position: absolute;
						inset: 0;
						margin: auto;
					}
				}
				.date{
					padding: 4rpx 0;
				}
				.name{
					padding: 4rpx 0;
					color: #666;
				}
				.time{
					color: #f2f2f2;
				}
			}
		}
		
		
	}
	
</style>
